<template>
  <div class="list">
     <div class="top">
        爆爆团
     </div>
     <div class="center">
      <section v-for="(item,index) in like" :key="index" :class="{active: currentIndex == index }"  @click="handleClick(index)" class="btn">{{item}}</section>
     </div>
     <div class="shop" v-for="(item,index) in list" :key="index">
        <div class="imgbox">
            <img :src="item.pic" alt="">
        </div>
        <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="saled">月售 {{item.saled}} 件</div>
            <div class="km" @click="lingqu(item,index)"> {{item.km?'马上抢':'去使用'}}</div>
        </div>
    </div>
    <div class="button">
    <div @click="handleClick(index)" :class="{active: currentIndex1 == index }" class="btn" v-for="(item,index) in tablist" :key="index">
        <div> {{item.text}} </div>
    </div>
  </div>
  </div>
</template>

<script>
var pic ="https://tse1-mm.cn.bing.net/th/id/OIP-C.BUcWb7xBjD0SSOY_xUY58QHaHT?pid=ImgDet&rs=1"
export default {
    data(){
        return {
            currentIndex: 0,
            currentIndex1: 0,
            list:[
                {pic,name:'作业店',saled:888,km:"马上抢"},
                {pic,name:'真的馆',saled:6666,km:"马上抢"},
                {pic,name:'好多店',saled:7777,km:"马上抢"},
            ],
            like:["正在抢购","上新预告"],
            tablist:[
                {
                    pic:'',
                    text:'首页',
                },
                {
                    pic:'',
                    text:'订单',
                },
                {
                    pic:'',
                    text:'我的',
                },
            ]
        }
    },
    methods:{
      lingqu(item,index){
            item.km = false;
        },
        handleClick(index){
            this.currentIndex1 = index;
        }
        
    }
}
</script>

<style>
.top{
   widows: 100%;
   height: 200px;
   text-align: center;
   line-height: 200px;
   font-size: 40px;
   font-weight: 900;
   color: #fff ;
   background-color: orangered;
}
.center{
   display: flex;
   background-color: orangered;
}
.center section{
   margin-left: 15px;
   color: #fff;
}
.list .shop{
    margin: 10px;
    display: flex;
}
.list .shop .imgbox{
    width: 80px;
    margin-right: 10px;
}
.list .shop .imgbox img{
    width: 100%;
}
.list .shop .text{
    flex: 1;
    font-size: 14px;
}
.list .shop .text .name{
    font-weight: bold;
}
.km{
   width: 60px;
   height: 30px;
   border-radius: 15px;
   text-align: center;
   line-height: 30px;
   margin-left: 200px;
   background-color: orangered;
}
.button{
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #ccc;
}
.button .active{
    color: lightskyblue;
}
</style>